<template>
  <div style="height: calc(100vh); overflow: hidden">
    <el-container style="height: 100%; overflow: hidden">
      <el-aside width="auto" style="background-color: #545c64">
        <div v-for="(menuItem, index) in menu" :key="menuItem.path">
          <el-menu
            :collapse="isCollapse"
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            :default-openeds="['/authority', '/base', '/user','/menu','/panel']"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"
            router
          >
            <div class="el-menu-box" v-if="index === 0">
              <div
                class="logo-image"
                style="width: 18px; height: 18px; background-size: 18px 18px"
              ></div>
              <div v-if="!isCollapse" style="padding-left: 5px; padding-top: 7px">
                <span>OverallAuth2.0</span>
              </div>
            </div>
            <el-sub-menu
              v-if="menuItem.children && menuItem.children.length"
              :index="menuItem.path"
              :key="menuItem.name"
            >
              <template #title>
                <el-icon size="14"
                  ><component class="icons" :is="menuItem.menuIcon"></component></el-icon
                ><span>{{ menuItem.name }}</span>
              </template>
              <el-menu-item
                v-for="subMenuItem in menuItem.children"
                :index="subMenuItem.path"
                :route="{ name: subMenuItem.name }"
                :key="subMenuItem.name"
                @click="menuItemClick(subMenuItem)"
                style="cursor: pointer"
              >
                <el-icon size="14"
                  ><component class="icons" :is="subMenuItem.menuIcon"></component
                ></el-icon>
                <span>{{ subMenuItem.name }}</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item
              v-else
              :index="menuItem.path"
              :key="menuItem.path"
              :route="{ name: menuItem.name }"
              @click="menuItemClick(menuItem)"
              style="cursor: pointer"
            >
              {{ menuItem.name }}
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>

      <el-container>
        <el-header class="headerCss">
          <div style="display: flex; height: 100%; align-items: center">
            <div style="margin-right: 10px; margin-left: -10px; cursor: pointer">
              <el-icon
                size="22"
                title="收缩"
                v-if="!isCollapse"
                @click="collapseClick(true)"
                ><Fold
              /></el-icon>
              <el-icon
                size="22"
                title="展开"
                v-if="isCollapse"
                @click="collapseClick(false)"
                ><Expand
              /></el-icon>
            </div>
            <div style="text-align: left; width: 50%; font-size: 18px; display: flex">
              <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :value="false">expand</el-radio-button>
      <el-radio-button :value="true">collapse</el-radio-button>
    </el-radio-group> -->
              <div class="logo-image" style="width: 32px; height: 32px"></div>
              <div style="padding-left: 10px; padding-top: 7px">
                OverallAuth2.0 统一权限分发中心
              </div>
            </div>
            <div
              style="
                text-align: right;
                width: 50%;
                display: flex;
                justify-content: right;
                cursor: pointer;
              "
            >
              <div style="display: flex; margin-top: -1px">
                <el-icon
                  @click="heperClick"
                  style="cursor: pointer"
                  size="25"
                  color="blue"
                  ><QuestionFilled
                /></el-icon>
                <el-button
                  type="text"
                  @click="heperClick"
                  style="margin-left: 5px; margin-right: 10px; margin-top: -2px"
                  >帮助中心</el-button
                >
              </div>
              <div
                class="user-image"
                style="width: 22px; height: 22px; background-size: 22px 22px"
              ></div>
              <div style="padding-left: 5px; padding-top: 3px">
                欢迎：{{ userStore.userInfo.userName }}
              </div>

              <!-- <div style="padding-left: 5px; padding-top: 3px">
                欢迎：{{ userStore.userInfo.userName }}
              </div> -->

              <div style="margin-top: -5px; margin-left: 5px">
                <el-button type="text" @click="logoutClick">退出登录</el-button>
              </div>
            </div>
          </div>
        </el-header>

        <el-main>
          <el-affix :offset="60">
            <el-tabs
              v-if="tabsList.length > 0 && tabsList.length !== undefined"
              v-model="defaultActive"
              class="demo-tabs"
              @click="tabsClick(defaultActive)"
              @tab-remove="tabRemoveClick"
            >
              <el-tab-pane
                v-for="item in tabsList"
                :label="item?.name"
                :name="item?.path"
                :key="item?.path"
                :closable="item?.path == '/panel' ? false : true"
                style="font-size: 16px"
              >
                <template #label v-if="item?.path === defaultActive">
                  {{ item.name }}
                  <el-icon class="hover-icon" @click="refreshClick(item.path)"
                    ><Refresh
                  /></el-icon>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-affix>
          <router-view> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <systemAlert :isVisibles="isAlertVisibles"> </systemAlert>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { RouteRecordRaw } from "vue-router";
import router from "../../router/index";
import { useUserStore } from "@/store/user";
import systemAlert from "../login/systemAlert.vue";
import { helperUrl } from "@/api/requestAddress";
import { clearCookie } from "@/api/publicTool";

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    const menu = ref<any>();
    //初始加载dom
    onMounted(() => {
      userStore.loadMenus();
      tabsList.value.push(menu.value[0]);
      router.push("/panel");
    });

    //菜单收缩属性--默认展开
    const isCollapse = ref(false);

    const helperRoute = ref<string>(helperUrl);
    const defaultActive = ref("/panel");
    menu.value = userStore.menus.filter(
      (f: { path: string }) => f.path != "/framework" && f.path != "/login"
    );
    const isAlertVisibles = ref<boolean>(true);
    const tabsList = ref<any>([]);

    //菜单项点击事件
    function menuItemClick(subMenuItem: RouteRecordRaw) {
      // tabList中不存在则追加
      if (!tabsList.value.some((sub: { path: string }) => sub.path == subMenuItem.path)) {
        tabsList.value.push(subMenuItem);
      }
      defaultActive.value = subMenuItem.path;
    }

    //菜单标签点击事件
    const tabsClick = (item: string) => {
      defaultActive.value = item;
      router.push({ path: item });
    };

    //菜单标签移除事件
    const tabRemoveClick = (path: any) => {
      tabsList.value.map((item: { path: string }, index: any) => {
        if (item.path == path) tabsList.value.splice(index, 1); //index 当前元素索引；1：需要删除的元素个数
      });
      defaultActive.value = "/panel";
      router.push({ path: "/panel" });
    };

    //退出登录
    const logoutClick = function () {
      userStore.token = "";
      userStore.expiresDate = "";
      userStore.initialized = false;
      clearCookie("SSO_AuthCookie", "", "");
      clearCookie("SSO_JWT_Token", "", "");
      router.push("/login");
    };

    //帮助中心事件
    const heperClick = function () {
      const heperUrl = helperRoute.value + "pages/4bf38e/";
      window.open(heperUrl, "_blank");
    };

    //菜单收缩事件
    const collapseClick = function (isTrue: boolean) {
      isCollapse.value = isTrue;
    };

    const refreshClick = function (path: string) {
      // nextTick(() => {
      // defaultActive.value = path;
      router.push({ path: "/panel" });
      // });
    };
    return {
      menu,
      tabsList,
      defaultActive,
      tabsClick,
      tabRemoveClick,
      menuItemClick,
      logoutClick,
      heperClick,
      isAlertVisibles,
      userStore,
      isCollapse,
      collapseClick,
      refreshClick,
    };
  },
  components: { systemAlert },
});
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  border: none;
  /* min-height: 400px; */
}
.el-menu {
  border: none;
}
.el-menu-box {
  display: flex;
  padding-left: 25px;
  align-items: center;
  height: 57px;
  box-shadow: 0 1px 4px #00152914;
  border: 1px solid #00152914;
  color: white;
}
.el-main {
  padding-top: 0px;
  padding-left: 1px;
  padding-right: 1px;
  margin: 0;
}
.headerCss {
  font-size: 12px;
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  justify-content: right;
  align-items: center;
  /* display: flex; */
}
.logo-image {
  background-image: url("../../assets/picture/权限分配.png");
}
.user-image {
  background-image: url("../../assets/picture/用户.png");
}
.demo-tabs /deep/ .el-tabs__header {
  color: #333; /* 标签页头部字体颜色 */
  margin: 0 0 5px !important;
  background-color: white;
}
.demo-tabs /deep/ .el-tabs__nav-wrap {
  padding-left: 10px;
}
.scrollable-view {
  overflow: auto;
  height: 100%; /* 根据需要设置高度 */
}

.hover-icon {
  margin-left: 10px;
}
.hover-icon:hover {
  background-color: #d3d2d2e0; /* 浅蓝色背景 */
  color: #272626; /* 同时改变图标颜色 */
  cursor: pointer !important;
}
</style>
